<template>
  <div class="Row_content">
    <Form ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="80">
      <FormItem label="角色名称"
                prop="roleName">
        <Input v-model="formValidate.roleName"
               placeholder="请填写角色名称"
               @on-keyup="filterSpace"
               :maxlength="20"
               :disabled='disabled'
               class="Row_content_input"></Input>
      </FormItem>
      <FormItem label="角色描述"
                prop="remark">
        <Input v-model="formValidate.remark"
               type="textarea"
               :autosize="{minRows: 4,maxRows: 8}"
               :maxlength="300"
               placeholder="输入角色描述"
               :disabled='disabled'
               class="Row_content_input"></Input>
        <span class="rol_tipsd">{{formValidate.remark?formValidate.remark.length:0}}/300</span>
      </FormItem>
      <FormItem class="form-btn"
                style="margin-top: 5px;">
        <Button type="primary"
                class="system-submit-btn"
                @click="handleSubmit"
                :disabled="isDisabled"
                v-if="!disabled">确定</Button>
        <Button class="system-submit-btn"
                @click="handleReset"
                style="margin-left: 8px">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import { routeEqual } from '@/libs/util'
import { createRole, demandRole, updateRole } from '@/api/system/role'
export default {
  name: 'role_create',
  data () {
    return {
      name: '添加职务',
      disabled: false,
      isDisabled: false,
      formValidate: {
        'merchantId': this.$store.state.user.merchantId,
        roleName: null, // 职务名称
        remark: null, // 角色描述
        createBy: 'sss'
      },
      updateParmas: {
        id: '',
        roleKey: '',
        sortNum: '',
        updateBy: 'sdd'
      },
      ruleValidate: {
        roleName: [
          { required: true, message: '职务名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    if (this.$route.params.id) {
      this.disabled = false
      demandRole({
        'merchantId': this.$store.state.user.merchantId,
        id: this.$route.params.id
      }).then(res => {
        if (res.data.status === 200) {
          this.formValidate.roleName = res.data.data.roleName
          this.formValidate.remark = res.data.data.remark
          this.updateParmas.id = res.data.data.id
          this.updateParmas.roleKey = res.data.data.roleKey
          this.updateParmas.sortNum = res.data.data.sortNum
        }
      })
    } else if (this.$route.query.id) {
      this.disabled = true
      demandRole({
        'merchantId': this.$store.state.user.merchantId,
        id: this.$route.query.id
      }).then(res => {
        if (res.data.status === 200) {
          this.formValidate.roleName = res.data.data.roleName
          this.formValidate.remark = res.data.data.remark
          this.updateParmas.id = res.data.data.id
          this.updateParmas.roleKey = res.data.data.roleKey
          this.updateParmas.sortNum = res.data.data.sortNum
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    } else {
      this.disabled = false
      this.formValidate = {
        'merchantId': this.$store.state.user.merchantId,
        roleName: '', // 职务名称
        remark: null, // 角色描述
        createBy: 'sss'
      }
    }
  },
  methods: {
    filterSpace () {
      this.formValidate.roleName = this.formValidate.roleName.replace(/\s+/g, '')
    },
    handleSubmit () {
      this.$route.params.id ? this.$refs.formValidate.validate((val) => {
        if (val) {
          if (!this.isDisabled) {
            if (this.isDisabled) {
              return
            }
            this.isDisabled = true
            updateRole({ ...this.formValidate, ...this.updateParmas }).then(res => {
              setTimeout(() => {
                this.isDisabled = false
              }, 500)
              if (res.data.status === 200) {
                this.$Message.success('编辑成功！')
                this.$store.commit('closeTag', this.$route)
                this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
                this.$nextTick(() => {
                  this.$router.push({
                    name: 'role_list'
                  })
                })
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          }
        }
      }) : this.$refs.formValidate.validate((val) => {
        if (val) {
          if (!this.isDisabled) {
            if (this.isDisabled) {
              return
            }
            this.isDisabled = true
            createRole(this.formValidate).then(res => {
              setTimeout(() => {
                this.isDisabled = false
              }, 500)
              if (res.data.status === 200) {
                this.$Message.success('新增成功！')
                this.$store.commit('closeTag', this.$route)
                this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
                this.$nextTick(() => {
                  this.$router.push({
                    name: 'role_list'
                  })
                })
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          }
        }
      })
    },
    handleReset () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'role_list'
        })
      })
    }
  }
}
</script>
<style lang="less">
.rol_tipsd {
  display: inline-block;
  width: 100%;
  text-align: right;
  font-size: 12px;
  line-height: 14px;
  color: #c5c8ce;
}
</style>
